<template>
  <div>
    <div class="row col-md-12">
      <div class="col-md-4">
        <div class="form-group row">
          <label class="col-md-3 padding-right col-form-label col-offset-1">模板名称</label>
          <div class="col-md-8">
            <input type="text" class="form-control rounded" />
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group row">
          <label class="col-md-3 padding-right col-form-label">采集模板</label>
          <div class="col-md-8">
            <select class="form-control">
              <option>模板1</option>
              <option>模板2</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group row">
          <label class="col-md-3 padding-right col-form-label">模板分类</label>
          <div class="col-md-8">
            <select class="form-control">
              <option>资讯类型</option>
              <option>招标类型</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row col-md-12">
      <div class="col-md-8">
        <div class="form-group row">
          <!-- <label class="col-md-3 padding-right col-form-label col-offset-1">运行环境</label> -->
          <div class="col-md-12" style="padding-top: 5px;">
            <el-radio v-model="radio" label="1">备份下载到本机</el-radio>
            <el-radio v-model="radio" label="2">备份到本地NAS服务器上</el-radio>
            <el-radio v-model="radio" label="3">备份到远程NFS服务器</el-radio>
          </div>
        </div>
      </div>
    </div>
    <div>
      <b-button variant="primary">开始备份</b-button>
    </div>
    <backupsTransaction />
  </div>
</template>
<script>
import backupsTransaction from "./backupsTransaction";
export default {
  components: { backupsTransaction },
  data () {
    return {
      radio: '1',
      instanceTypeList: ["ElasticSearch","MySQL","MongoDB"],
      instanceType: '',
      databaseServerList: ["192.168.71.52"],
      databaseServer: '',
      databaseList: ["ES_lastDB"],
      database: '',
      datasheetList: ["ES_lastTable"],
      datasheet: '',
      dataDeDuplicationList: ["bloom_infos"],
      dataDeDuplication: '',
      messageServerList: ["192.168.71.83"],
      messageServer: '',
      queueNameList: ["192.168.71.83"],
      queueName: '',
      totalRows: 1,
      currentPage: 1,
      perPage: 10,
      pageOptions: [10, 25, 50, 100],
      filter: null,
      filterOn: [],
      sortBy: "seedNum",
      sortDesc: false,
      ordersData: [
        {
          name: "title",
          outputValue: "${title}",
          dataFormat: "",
          desc: "",
        },{
          name: "publish_time",
          outputValue: "${publish_time}",
          dataFormat: "",
          desc: "",
        },{
          name: "contenthtml",
          outputValue: "",
          dataFormat: "",
          desc: "",
        },{
          name: "content",
          outputValue: "",
          dataFormat: "",
          desc: "",
        }
      ],
      fields: [
        { key: "name", label: "输入字段名称（系统加载）" },
        { key: "outputValue", label: "输出数据值（开发者配置）" },
        { key: "dataFormat", label: "字段类型（数据格式）" },
        { key: "desc", label: "字段说明" }
      ],
      handleSwitch: false,
      interfaceCode: '',
    }
  },
  mounted() {
    this.totalRows = this.ordersData.length;
  },
}
</script>
<style lang="scss" scoped>
label{
  margin-bottom: 0;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 12px;
}
.padding-right{
  padding-right: 0;
  padding-top: .2rem;
  padding-bottom: .2rem;
}
.row{
  .el-input__inner{
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
    ::v-deep .el-input__icon,::v-deep .el-range-separator{
      line-height: 1.7rem;
    }
  }
  input,select{
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
</style>
